<!-- 首页页面 -->
<template>
  <div class="Home">
    <!-- 顶部导航栏 吸顶 -->
    <xrzp-HeaderSearch @onSearch="onSearch"></xrzp-HeaderSearch>
    
    <!-- 加载动画 -->
    <xrzp-Loading v-if="!SortDetail&&!NotSearch"></xrzp-Loading>

    <!-- 未搜索到数据 -->
    <xrzp-EmptyState v-else-if="NotSearch"></xrzp-EmptyState>  

    <template v-else-if="SortDetail">
      <van-swipe @change="onChange" :autoplay="3000">
        <van-swipe-item v-for="(item) in 6" :key="item">
          <img :src="require(`@/assets/home/circulation${item}.jpg`)" alt="" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/6</div>
        </template>
      </van-swipe>

      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="(item, index) in arr" :key="index" @click="tips">
          <img :src="item.imgurl" alt="" />
          <div>{{ item.text }}</div>
        </van-grid-item>
        <van-grid-item to="/journalism">
          <img :src="require('@/assets/home/r08.jpg')" alt="" />
          <div>新闻</div>
        </van-grid-item>
      </van-grid>

      <div class="animation">
        <div class="animate__animated animate__heartBeat">今日推荐</div>
        <router-link :to="`/sort`">  
          <div>更多内容<span>👉</span></div>
        </router-link>
      </div>
      <van-list v-model="loading" finished-text="没有更多了" @load="loadMore" :finished="finished">
        <van-swipe-cell v-for="(item,index) in SortDetail" :key="index">
          <router-link :to="`/sort/sortDetail/${item.id}`">
            <van-card :tag="tag(item)" :title="item.name" :thumb="item.pic" >
              <template #bottom>
                <div class="van-multi-ellipsis--l3 content" v-html="item.content"></div>
              </template>
            </van-card>
          </router-link>
        </van-swipe-cell>
      </van-list>
      <xrzp-Istop class="mb50"></xrzp-Istop>
    </template>

    <!-- 底部选项卡 -->
    <xrzp-FootTabbar></xrzp-FootTabbar>
  </div>
</template>

<script>
import { Toast } from 'vant';
import HeaderSearch from "@/components/HeaderSearch.vue";
import EmptyState from "@/components/EmptyState.vue";
import { axios_byclass,axios_search } from "@/api/data_axios";
export default {
  components:{"xrzp-HeaderSearch": HeaderSearch,"xrzp-EmptyState": EmptyState},
  data(){
    return{
      NotSearch:false, // 未搜索到数据 
      current: 0,      // 轮播图页数
      start:0,         // 起始条数
      loading: false,  // 加载状态
      finished: false, // 完成状态
      search:"",       // 搜索的值
      isSearch: false, // 搜索判断条件
      arr: [
        { imgurl: require("../assets/home/r01.jpg"), text: "一周最热" },
        { imgurl: require("../assets/home/r02.jpg"), text: "人气菜肴" },
        { imgurl: require("../assets/home/r03.jpg"), text: "春季食谱" },
        { imgurl: require("../assets/home/r04.jpg"), text: "高颜值" },
        { imgurl: require("../assets/home/r05.jpg"), text: "早餐" },
        { imgurl: require("../assets/home/r06.jpg"), text: "家常菜谱" },
        { imgurl: require("../assets/home/r07.jpg"), text: "烘焙大全" },
        // { imgurl: require("../assets/home/r08.jpg"), text: "新闻" },
      ],
      SortDetail:null,
      appkey:"13e76141171ebe61f22e24477b559988"
    }
  },
  computed:{
    // 图片角标 闭包解决 v-for循环 计算属性 item 取不到的问题
    tag(){
      return function(item){
        return item.tag.split(',').length > 5 ?'火爆':'推荐';
      }
    },
  },
  mounted(){
    this.getSortDetail();
  },
  methods:{
    // 点击搜索发送请求
    onSearch(search) {
      window.scrollTo(0, 400);
      this.search = search;
      if (search !== "") { //非空值进行搜索
        let data ={
          keyword:search,
          start:0,
          num:20,
          appkey:this.appkey
        }
        axios_search(data).then(res=>{
          this.SortDetail = res.result.result.list;
          this.NotSearch = res.result.msg == "没有信息";
          this.isSearch = true;
          this.start = 0;
        })
      } else { //空值复原
        this.isSearch = false;
        this.start = 0;
        window.scrollTo(0, 400);
        this.getSortDetail();
      }
    },
    onChange(index) {
      this.current = index;
    },
    getSortDetail() {
      let data ={
        classid:324,
        start:0,
        num:20,
        appkey:this.appkey
      }
      axios_byclass(data).then(res=>{
        this.SortDetail = res.result.result.list;
        this.NotSearch = res.result.msg == "没有信息";
      })
    },
    // 触底加载
    loadMore() {
      this.start += 20;
      this.loading = true;
      if ( this.isSearch ) {
        let data ={
          keyword:this.search,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        // 发送http请求,获取当前类别下的下一页数据,更新列表
        axios_search(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.SortDetail = [...this.SortDetail,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      } else {
        let data ={
          classid:324,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        // 发送http请求,获取当前类别下的下一页数据,更新列表
        axios_byclass(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.SortDetail = [...this.SortDetail,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      }
    },
    // 提示
    tips(){
      Toast('功能未开放');
    }
  }
}
</script>

<style lang="scss" scoped>
.Home {
  margin-bottom: 50px;
  .van-swipe{
    margin-top: 54px;
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: white;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
    }
    img{
      width: 100%;
    }
  }
  .van-grid{
    img{
      width: 50px;
      margin-bottom: 5px;
    }
    div{
      font-size: 14px;
    }
  }
  .animation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .animate__animated {
      animation-duration: 1.8s;
      animation-iteration-count:infinite;
      font-size:18px;
      display: inline-block;
      margin-left: 20px;
      color: red;
      text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; 
      line-height: 30px;
    }
    div:last-child {
      margin-right: 20px;
      font-size: 14px;
      cursor:pointer;
      background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); 
      background-clip:text; 
      -webkit-text-fill-color:transparent;
      margin-left: 10px;
      font-weight: 400;
      span{
        position: relative;
        top: -2px;
        color: yellow;
        -webkit-text-fill-color:yellow;
      }
    }
  }
  .content{
    text-align: justify;
  }
  .van-swipe-cell{
    .van-card__content{
      justify-content: flex-start;
      .van-card__title{
        font-size: 15px;
        font-weight: bold;
        line-height: 20px;
        padding-bottom: 7px;
      }
    }
  }
}
</style>
